<template>
    <div class="editor-box">
        <div ref="topBar">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
        </div>
        <Editor style="height: 600px;overflow-y: hidden" v-model="html" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" @onChange="change" />
    </div>
</template>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor } from "@wangeditor/editor";
import {
    Message,
} from 'element-ui';
export default Vue.extend({
    components: {
        Editor,
        Toolbar,
    },
    props: {
        htmlData: {
            type: String,
            default: "",
        },
        readOnly: {
            type: Boolean,
            default: false,
        },
        goodsStatus: {
            type: Number,
            default: 10
        }
    },
    data() {
        return {
            editor: null, //实例
            html: "",
            toolbarConfig: {},
            editorConfig: {
                placeholder: "请输入内容...",
                autoFocus: true,
                MENU_CONF: {
                    uploadImage: {
                        server: "/supply/uploadFile",
                        fieldName: "iFile",
                        headers: {
                            Authorization: localStorage.getItem("Supply-Access-Token")
                                ? localStorage.getItem("Supply-Access-Token")
                                : "",
                        },
                        meta: {
                            type: 10,
                        },
                        allowedFileTypes: ['image/*'],
                        withCredentials: true,
                        customInsert(res, insertFn) {
                            console.log('res', res)
                            insertFn(res.file_url);
                        },
                        onError(file, err, res) {
                            Message({
                                message: `${file.name} 上传出错，上传文件大小不能超过2MB!`,
                                type: 'error'
                            })
                        }
                    },
                },
            },
            mode: "default", // or 'simple'
        };
    },
    watch: {
        htmlData(newValue) {
            this.html = newValue ? newValue : "";
        },
        readOnly(newValue) {
            if (newValue) {
                this.editor.disable();
            }
        },
    },
    created() {

    },
    methods: {
        onCreated(editor) {
            this.$nextTick(() => {
                this.html = this.htmlData;
                this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
                this.editor.getConfig().autoFocus = true;
                this.editor.getConfig().focus = true;
                if (this.goodsStatus != 10) {
                    this.editor.getConfig().readOnly = true
                } else {
                    this.editor.getConfig().readOnly = false
                }
                this.getConfig();
            });
        },
        getConfig() {
            this.$nextTick(() => {
                const toolbar = DomEditor.getToolbar(this.editor);
                console.log('toolbar', toolbar)
                const curToolbarConfig = toolbar.getConfig();
                // console.log(curToolbarConfig); // 当前菜单排序和分组
                curToolbarConfig.excludeKeys = [
                    "group-video",
                    "insertLink",
                    "insertTable",
                    "codeBlock",
                    "group-more-style",
                ];
            })
        },
        change(editor) {
            this.$emit("getHtml", editor.getHtml());
        },
    },
    mounted() { },
    beforeDestroy() {
        const editor = this.editor;
        if (editor == null) return;
        editor.destroy(); // 组件销毁时，及时销毁编辑器
    },
});
</script>
<style scoped>
/deep/ .w-e-text-placeholder {
    transform: translateY(-6px);
}

/deep/ .w-e-bar-divider {
    width: 0px;
}

.editor-box {
    min-width: 600px;
    min-height: 600px;
    border: 1px solid #ccc;
    z-index: 999 !important;
}
div * {
    user-select: text;
}

:deep(.editor-box) {
    z-index: 999 !important;
}

/* 调整输入框对不齐提示文字的问题 */
</style>